<template>
  <div class="all">
    <header>
      <div
        class="div"
        @click="back"
      >
        <img
          src="../../../assets/返回.png"
          alt=""
        >
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>治疗计划维护</span>
      </div>
      <div class="div">
        <span @click="keep" class="solid">保存</span>
      </div>
    </header>
    <div
      class="box"
      v-for="(item, index) in treatArr"
      :key="index"
    >
      <div
        class="title"
        @click="addTreat(item)"
      >
        <span style="display: flex;align-items: center">
            <a class="hengGang"></a>
            {{item.title}}
        </span>

        <img
          class="addImg"
          src="../../../assets/jia.png"
          alt=""
        >
      </div>
      <van-row
        v-for="(curr, currIndex) in item.list"
        :key="currIndex"
        type="flex"
        justify="space-between"
        align="center"
        style="margin: 5px 0;min-height: 29px;"
        class="backBlue box_text"
      >
        <van-col span="20">
          <p >
            {{curr.xt_name}}
            <span class="solid">
            {{curr.h_content}}{{unit(item)}}
          </span>
          </p>
        </van-col>
        <van-col span="2">
            <img @click="clickDel(curr, currIndex, item)" class="delImg" src="../../../assets/垃圾桶@2x.png" alt="">
        </van-col>
      </van-row>
    </div>
    <div v-show="isLoading"
         style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: absolute;top: 0;background: rgba(0, 0, 0, 0.5);z-index: 99999" >
      <van-loading size="24px" type="spinner" color="#fff">保存中...</van-loading>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZhiLiaoList',
  data () {
    return {
      treatArr: [
        {
          title: '胰岛素/胰岛素类类似药物',
          xt_type: 1,
          list: []
        }, {
          title: '口服降糖药',
          xt_type: 2,
          list: []
        }, {
          title: '饮食',
          xt_type: 3,
          list: []
        }, {
          title: '运动',
          xt_type: '',
          list: []
        }
      ],
      isLoading: false,
      userid: this.$route.query.userid // 用户登陆的id
    }
  },
  computed: {
    unit () {
      return function (item) {
        let unit = ''
        if (item.xt_type == 1) {
          unit = 'U'
        } else if (item.xt_type == 2) {
          unit = '粒'
        } else if (item.xt_type == 3) {
          unit = 'g'
        }
        return unit
      }
    }
  },
  mounted () {
    if (sessionStorage.getItem('xueTangData')) {
      let data = JSON.parse(sessionStorage.getItem('xueTangData'))
      this.treatArr = data.treatArr
    } else {
      this.getFindHealthXTweiHu()
    }
  },
  methods: {
    // 获取得到的治疗信息
    getFindHealthXTweiHu () {
      this.$http.findHealthXTweiHu({userid: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            let XT = res.data.data
            this.treatArr[0].list = XT.YdlIST
            this.treatArr[1].list = XT.JTlIST
            this.treatArr[2].list = XT.YSlIST
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击保存
    keep () {
      this.isLoading = true
      let data = {
        userid: this.userid,
        YdlIST: [],
        JTlIST: [],
        YSlIST: []
      }
      this.treatArr.map((curr, index) => {
        curr.list.map((childen, childenIndex) => {
          let obj = {
            'xt_name': childen.xt_name,
            'h_content': childen.h_content,
            'xt_type': curr.xt_type
          }
          if (curr.xt_type == 1) {
            data.YdlIST.push(obj)
          } else if (curr.xt_type == 2) {
            data.JTlIST.push(obj)
          } else if (curr.xt_type == 3) {
            data.YSlIST.push(obj)
          }
        })
      })
      this.$http.savetHealthXueTang(data)
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.isLoading = false
            this.$toast('保存成功')
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 点击删除
    clickDel (curr, currIndex, item) {
      item.list.splice(currIndex, 1)
    },
    // 添加治疗计划
    addTreat (item) {
      if (item.xt_type) {
        // if (sessionStorage.getItem('xueTangData')) {
        //   let data = JSON.parse(sessionStorage.getItem('xueTangData'))
        //   data.treatArr = this.treatArr
        // } else {
        //   let data = this.treatArr
        // }
        let data = {treatArr: this.treatArr}
        sessionStorage.setItem('xueTangData', JSON.stringify(data))
        this.$router.replace({path: '/SelectTreat', query: {xt_type: item.xt_type, userid: this.userid}})
      }
    },
    // 返回
    back () {
      let data = JSON.parse(sessionStorage.getItem('xueTangData'))
      // this.$router.push({path: '/AddXueTang', query: {userid: this.userid}})
      // this.$router.history.go(-Number(data.index))
      this.$router.history.go(-1)
    }
  },
  destroyed () {
    // let data = JSON.parse(sessionStorage.getItem('xueTangData'))
    // data.treatArr = this.treatArr
    // sessionStorage.setItem('xueTangData', JSON.stringify(data))
  }
}
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div {
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}
.title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  height: 44px;
}
.hengGang{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  display: block;
  margin-right: 5px;
  border-radius: 2px;
}
.box {
  border-bottom: 1px solid #E5E5E5;
  padding: 0 10px;
  box-sizing: border-box;
  background: #FFFFFF;
}
.addImg{
  width: 22px;
  height: 22px;
}
.backBlue{
  background: #E8F6FE;
}
.box_text{
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
  color: #333333;
}
.delImg{
  width: 14px;
  height: 15px;
}
</style>
